<template>
	<view class="content">
		<nav-bar :title="$t('個人中心')" rightIcon="gear" @clickRight="hanleSz"></nav-bar>
		<view class="content-1">
			<view class="info">
				<image class="headPic" mode="aspectFill" src="@/assets/my/youxiang.png"></image>
				<view class="name-brief">
					<view class="name">
						<text>{{ getMyData.userName }}</text>
						<!-- <text class="dengji">V{{getMyData.userGrade}}经纪人</text> -->
					</view>
					<view class="dengji">
						<image class="denjiIcon" src="@/assets/index/c0.png"
							v-if="!getMyData.userGrade && lang == 'zh-Hant'"></image>
						<image class="denjiIcon" src="@/assets/index/c1.png"
							v-if="getMyData.userGrade == 1 && lang == 'zh-Hant'"></image>
						<image class="denjiIcon" src="@/assets/index/c2.png"
							v-if="getMyData.userGrade == 2 && lang == 'zh-Hant'"></image>
						<image class="denjiIcon" src="@/assets/index/c3.png"
							v-if="getMyData.userGrade == 3 && lang == 'zh-Hant'"></image>
						<image class="denjiIcon" src="@/assets/index/c4.png"
							v-if="getMyData.userGrade == 4 && lang == 'zh-Hant'"></image>
						<image class="denjiIcon" src="@/assets/index/c5.png"
							v-if="getMyData.userGrade == 5 && lang == 'zh-Hant'"></image>
						<image class="denjiIcon" src="@/assets/index/e0.png" v-if="!getMyData.userGrade && lang == 'en'">
						</image>
						<image class="denjiIcon" src="@/assets/index/e1.png"
							v-if="getMyData.userGrade == 1 && lang == 'en'">
						</image>
						<image class="denjiIcon" src="@/assets/index/e2.png"
							v-if="getMyData.userGrade == 2 && lang == 'en'">
						</image>
						<image class="denjiIcon" src="@/assets/index/e3.png"
							v-if="getMyData.userGrade == 3 && lang == 'en'">
						</image>
						<image class="denjiIcon" src="@/assets/index/e4.png"
							v-if="getMyData.userGrade == 4 && lang == 'en'">
						</image>
						<image class="denjiIcon" src="@/assets/index/e5.png"
							v-if="getMyData.userGrade == 5 && lang == 'en'">
						</image>
						<!-- zh-Hant -->
						<!-- 						<image class="denjiIcon" src="@/assets/my/vip.png"></image>
						<text
							style="color: #fff;font-size: 30rpx;margin-left: 5rpx;">{{ getMyData.userGrade || 0 }}</text><text
							class="iconText">{{ $t('經紀人') }}</text> -->
					</view>
					<view class="brief" v-if="getMyData.userGrade < 3">
						<view>
							{{ $t('距離V') }}{{ getMyData.userGrade == 5 ? '5' : getMyData.userGrade + 1 }}{{ $t('級別經紀人還差：')
							}}
						</view>
						<view>
							{{ getMyData.remainsTotalFlow }}(T){{ $t('流量') }}
						</view>
					</view>
					<view class="brief" v-if="getMyData.userGrade == 3 || getMyData.userGrade == 4">
						<view>
							{{ $t('距離V') }}{{ getMyData.userGrade == 5 ? '5' : getMyData.userGrade + 1 }}{{ $t('級別經紀人還差：')
							}}
						</view>
						<view>
							{{ getMyData.remainsTotalFlow }}{{ $t('個') }} V{{ getMyData.userGrade }}{{ $t('團隊') }}
						</view>
					</view>
				</view>
			</view>
			<view class="num-data">
				<!-- 				<image style="width: 100%;height: 220rpx;margin-right: 0px;" class="" mode="aspectFill"
					src="@/assets/my/beijing.png"></image> -->
				<!-- 				<view class="ll item">
					<view class="num">
						{{data?.ll ? data.ll : '- -'}}
					</view>
					<view class="type">
						{{ $t('团队业绩(流量)') }}
					</view>
				</view> -->
				<view class="item" style="display:flex;justify-content: space-between;align-items: center;">
					<view style="margin-left: 50rpx;" class="cfp ">
						<view class="num">
							{{ getMyData.groupTotalAmountFlow || 0 }}
						</view>
						<view class="type">
							{{ $t('團隊縂流量(T)') }}
						</view>
					</view>
					<view style="margin-right: 50rpx;" class="rs " @click="jump1()">
						<view class="num">
							{{ getMyData.groupNumber || 0 }}
						</view>
						<view class="type">
							{{ $t('邀請人數') }}
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="content-2">
			<view class="my-flow cont2-box" @click="jump2()">
				<image class="icon" src="../../assets/shop/qian.png"></image>
				<view class="tit-info">
					<view class="tit">
						{{ $t('我的流量包') }}
					</view>
					<view class="info">
						{{ $t('持有流量包清單') }}
					</view>
				</view>
			</view>
			<view class="asset cont2-box" @click="handleZczx">
				<image class="icon" src="../../assets/shop/liu.png"></image>
				<view class="tit-info">
					<view class="tit">
						{{ $t('資產中心') }}
					</view>
					<view class="info">
						{{ $t('收益匯總和明細') }}
					</view>
				</view>
			</view>
		</view>
		<view class="content-3">
			<view class="cont3-item">
				<image class="img" src="../../assets/my/haoyou.png" @click="jump3()"></image>
				<view class="name">
					{{ $t('邀請好友') }}
				</view>
			</view>
			<view class="cont3-item">
				<image class="img" src="../../assets/my/zhuan.png" @click="jump4()"></image>
				<view class="name">
					{{ $t('流轉') }}
				</view>
			</view>
			<!-- 			<view class="cont3-item">
				<image class="img" src="@/assets/my/@2x(5).png"></image>
				<view class="name">
					{{ $t('实名认证') }}
				</view>
			</view> -->
			<view class="cont3-item">
				<image class="img" src="../../assets/my/chong.png" @click="jump5()"></image>
				<view class="name">
					{{ $t('充值') }}
				</view>
			</view>
			<view class="cont3-item">
				<image class="img" src="../../assets/my/usdt.png" @click="jump6()"></image>
				<view class="name">
					USDT
				</view>
			</view>
			<view class="cont3-item">
				<image class="img" src="../../assets/my/zxkf.png" @click="jump7()"></image>
				<view class="name">
					{{ $t('在綫客服') }}
				</view>
			</view>
			<view class="cont3-item">
				<image class="img" src="../../assets/my/dh.png" @click="jump8()"></image>
				<view class="name">
					{{ $t('兌換') }}
				</view>
			</view>
			<view class="cont3-item">
				<image class="img" src="../../assets/my/zhaq.png" @click="jump9()"></image>
				<view class="name">
					{{ $t('賬戶安全') }}
				</view>
			</view>
			<view class="cont3-item">
				<image class="img" src="../../assets/my/aqzx.png" @click="jump10()"></image>
				<view class="name">
					{{ $t('完善資料') }}
				</view>
			</view>
			<view class="cont3-item">

			</view>
			<!-- <view style="opacity: 0;" class="cont3-item" @click="handleUrl">
				<image class="img" src="@/assets/my/xz.png" style="zoom: 0.7;"></image>
				<view class="name">
					{{ $t('下載APP') }}
				</view>
			</view> -->
			<!-- 			<view class="cont3-item">
				<image class="img" src="@/assets/my/@2x(7).png"></image>
				<view class="name">
					{{ $t('帮助中心') }}
				</view>
			</view>
			<view class="cont3-item">
				<image class="img" src="@/assets/my/@2x(8).png"></image>
				<view class="name">
					{{ $t('专属客服') }}
				</view>
			</view> -->
		</view>
		<!-- <m-tabbar fixed fill :current="2"></m-tabbar> -->
	</view>
</template>

<script setup>
import {
	onShow
} from "@dcloudio/uni-app"
import {
	jump
} from '@/utils/common.js'
import {
	computed,
	onMounted,
	ref,
	reactive,
	getCurrentInstance
} from 'vue'
import myList from '@/hooks/my.js'
import i18n from '@/locale/index'
const {
	list,
	details,
	page,
	size,
	sumComputed,
	getMyDataRequest
} = myList()
import {
	useI18n
} from 'vue-i18n'
const {
	t
} = useI18n()
const {
	ctx
} = getCurrentInstance()
const getMyData = ref({})
const lang = ref('')
const getList = async () => {
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	const data = await getMyDataRequest('user/personalCenter', list)
	getMyData.value = data
}
const handleDuihuan = () => {
	uni.navigateTo({
		url: "/pages/exchange/exchange",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const handleCz = () => {
	uni.navigateTo({
		url: "/pages/recharge/recharge",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const handleLz = () => {
	uni.navigateTo({
		url: "/pages/myCirculation/myCirculation",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const handleYqhy = () => {
	uni.navigateTo({
		url: "/pages/inviteFriends/inviteFriends",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const handleWdllb = () => {
	uni.navigateTo({
		url: "/pages/myFlow/myFlow",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const hanleSz = () => {
	uni.navigateTo({
		url: "/pages/setUp/setUp",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const handleZczx = () => {
	uni.switchTab({
		url: '/pages/shop/shop',
		success() {
			let page = getCurrentPages().pop(); //跳转页面成功之后
			if (!page) return;
			page.onShow(); //如果页面存在，则重新刷新页面
		}
	});
}
const handleTdrs = () => {
	uni.navigateTo({
		url: "/pages/team/team",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
const handleUrl = () => {
	uni.navigateTo({
		url: "/pages/myXz/myXz",
		animationType: "fade-in",
		animationDuration: 200,
	});
	// window.open = "https://cn.bing.com/search?q=uniapp+app%E5%9B%BE%E6%A0%87&form=ANSPH1&refig=9d7082c6039d4c46b29bad484dec57e6&pc=U531"
}
// var data = reactive({
// 	name: '123',
// 	dj: 1,
// 	text: '距离v2级别经纪人还差：200t流量',
// 	ll: 456,
// 	cfp: 4645,
// 	rs: 456
// })

onShow(() => {
	getList()
	lang.value = uni.getStorageSync('lang')
	uni.setTabBarItem({
		index: 0,
		text: i18n.global.t('首頁'),
	})
	uni.setTabBarItem({
		index: 1,
		text: i18n.global.t('資產'),
	})
	uni.setTabBarItem({
		index: 2,
		text: i18n.global.t('我的'),
	})
})

function jump1() {
	uni.navigateTo({
		url: "/pages/team/team",
		animationType: "fade-in",
		animationDuration: 200,
	});
}

function jump2() {
	uni.navigateTo({
		url: "/pages/myFlow/myFlow",
		animationType: "fade-in",
		animationDuration: 200,
	});
}

function jump3() {
	uni.navigateTo({
		url: "/pages/inviteFriends/inviteFriends",
		animationType: "fade-in",
		animationDuration: 200,
	});
}

function jump4() {
	uni.navigateTo({
		url: "/pages/myCirculation/myCirculation",
		animationType: "fade-in",
		animationDuration: 200,
	});
}

function jump5() {
	uni.navigateTo({
		url: "/pages/recharge/recharge",
		animationType: "fade-in",
		animationDuration: 200,
	});
}

function jump6() {
	uni.navigateTo({
		url: "/pages/shopUSDT/shopUSDT",
		animationType: "fade-in",
		animationDuration: 200,
	});
	// uni.showToast({
	// 	title: `${i18n.global.t('此功能近期開放')}`,
	// 	icon: 'none',
	// })
}

function jump7() {
	if (uni.getStorageSync('setUserInfo').customerType == undefined) {
		console.log('undeeeee ', 'pages\my\my.vue-第394行')
		return uni.navigateTo({
			url: "/pages/Customer/Customer",
			animationType: "fade-in",
			animationDuration: 200,
		});
	}
	if (uni.getStorageSync('setUserInfo').customerType) {
		uni.navigateTo({
			url: "/pages/Customer/Customer",
			animationType: "fade-in",
			animationDuration: 200,
		});
	} else {
		uni.navigateTo({
			url: "/pages/service/service",
			animationType: "fade-in",
			animationDuration: 200,
		});
	}
}


function jump8() {
	// uni.showToast({
	// 	title: `${i18n.global.t('此功能近期開放')}`,
	// 	icon: 'none',
	// })
	uni.navigateTo({
		url: "/pages/exchange/exchange",
		animationType: "fade-in",
		animationDuration: 200,
	});
}

function jump9() {
	// uni.showToast({
	// 	title: `${i18n.global.t('此功能近期開放')}`,
	// 	icon: 'none',
	// })
	uni.navigateTo({
		url: "/pages/safety/safety",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
function jump10() {
	// uni.showToast({
	// 	title: `${i18n.global.t('此功能近期開放')}`,
	// 	icon: 'none',
	// })
	uni.navigateTo({
		url: "/pages/security/security",
		animationType: "fade-in",
		animationDuration: 200,
	});
}
</script>

<style lang="scss" scoped>
.dengji {
	display: flex;
	align-items: center;
}

.iconText {
	margin-left: 15rpx;
	font-size: 22rpx;
	color: #fff;
}

.denjiIcon {
	width: 220rpx;
	height: 50rpx;
	display: block;
	// margin-top: 10rpx;
	// margin-bottom: 10rpx;
}

// .denjiIcon {
// 	width: 40rpx;
// 	height: 40rpx;
// 	display: block;
// 	// margin-top: 10rpx;
// 	// margin-bottom: 10rpx;
// }

.content-1 {
	width: 690rpx;
	// height: 360rpx;
	border-radius: 25rpx;
	box-sizing: border-box;

	.info {
		display: flex;

		.headPic {
			width: 126rpx;
			height: 126rpx;
			border: 3rpx solid #FFFFFF;
			border-radius: 50%;
		}

		.name-brief {
			margin-left: 24rpx;
			flex: 1;
			margin-top: 23rpx;

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
			}

			.brief {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 300;
				color: #FFFFFF;
			}
		}

	}

	.num-data {
		margin-top: 20rpx;
		width: 690rpx;
		height: 220rpx;
		box-sizing: border-box;
		justify-content: space-between;
		display: flex;
		// position: relative;

		.item {
			background-size: 100% 100%;
			background-image: url("@/assets/my/beijing.png");
			// position: absolute;
			width: 690rpx;
			height: 180rpx;
			// background-color: #fff;

			.num {
				text-align: center;
				font-size: 36rpx;
				font-family: DIN Alternate;
				font-weight: bold;
				color: #12FFFA;
			}

			.type {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #12FFFA;
			}
		}
	}
}

.content-2 {
	width: 100%;
	// margin-top: 36rpx;
	// display: flex;
	// justify-content: space-between;

	.cont2-box {
		padding: 28rpx 25rpx 27rpx;
		// width: 336rpx;
		margin-bottom: 15rpx;
		height: 125rpx;
		background: #24232C;
		border-radius: 15rpx;
		display: flex;
		box-sizing: border-box;
		align-items: center;
	}

	.icon {
		width: 70rpx;
		height: 70rpx;

	}

	.tit-info {
		margin-left: 19rpx;

		.tit {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}

		.info {
			margin-top: 12rpx;
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #808492;
		}
	}
}

.content-3 {
	width: 100%;
	margin-top: 40rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	text-align: center;

	.cont3-item {
		margin: 0 50rpx 138rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 15%;

		.img {
			width: 65rpx;
			height: 65rpx;
		}

		.name {
			margin-top: 13rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 300;
			color: #FFFFFF;
		}
	}
}
</style>